<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
</head>
<body>
<form action="/login" method="post">
    用户姓名：<input type="text" name="username"/>
    <br/>
    用户密码：<input type="password" name="password"/>
    <br/>

    <input type="submit" value="Login"/>

    <a href="../../sign.jsp"><input name="registerButton" type="button" value="Sign"></a>

</form>
<!--点击此元素会自动激活验证码, 此例使用的button元素, 也可以使用div、span等-->
<!--id :            (不可变) 元素的 ID, 值必须是 'TencentCaptcha'-->
<!--data-appid :    (必须) 验证码CaptchaAppId, 从腾讯云的验证码控制台中获取, 验证码控制台页面内【图形验证】>【验证列表】进行查看 。如果未新建验证，请根据业务需求选择适合的验证渠道、验证场景进行新建-->
<!--data-cbfn :     (必须) 回调函数名, 函数名要与 data-cbfn 相同-->
<!--data-biz-state :(可选) 业务自定义透传参数, 会在回调函数内获取到 （res.bizState）-->
<button id="TencentCaptcha" data-appid="2047777016" data-cbfn="callbackName" data-biz-state="data-biz-state"
        type="button">验证</button>
</body>

<script>
    // 回调函数需要放在全局对象window下
    window.callbackName = function (res) {
        // 返回结果
        // ret         Int       验证结果，0：验证成功。2：用户主动关闭验证码。
        // ticket      String    验证成功的票据，当且仅当 ret = 0 时 ticket 有值。
        // CaptchaAppId       String    验证码应用ID。
        // bizState    Any       自定义透传参数。
        // randstr     String    本次验证的随机串，请求后台接口时需带上。
        console.log('callback:', res);

        // res（用户主动关闭验证码）= {ret: 2, ticket: null}
        // res（验证成功） = {ret: 0, ticket: "String", randstr: "String"}
        if (res.ret === 0) {
            // 复制结果至剪切板
            let str = `【randstr】->【${res.randstr}】      【ticket】->【${res.ticket}】`;
            let ipt = document.createElement('input');
            ipt.value = str;
            document.body.appendChild(ipt);
            ipt.select();
            document.execCommand("Copy");
            document.body.removeChild(ipt);
            alert('1. 返回结果（randstr、ticket）已复制到剪切板，ctrl+v 查看。\n2. 打开浏览器控制台，查看完整返回结果。');
        }
    }
</script>
</html>